<template>
  <div class="wrapper">
    <section class="shipped-tab-btn-group">
      <Button type="primary" size="large" class="item">View WH Shipped</Button>
      <Button type="primary" size="large" class="item" disabled>View Customer Shipped</Button>
    </section>

    <section class="data-operates data-operates-top">
      <Form ref="filterForm" :model="filterForm" :label-width="80">
        <div class="input-group">
          <FormItem label="Status" prop="status" class="item-status">
            <CheckboxGroup v-model="filterForm.status">
              <Checkbox label="Shipment Sent"></Checkbox>
              <Checkbox label="Shipment Received – All arrive"></Checkbox>
              <Checkbox label="Shipment Received – Wrong Item Received"></Checkbox>
              <Checkbox label="Shipment Received – Missing Item"></Checkbox>
            </CheckboxGroup>
          </FormItem>
        </div>
        <div class="input-group">
          <FormItem label="Create Date" class="item">
            <DatePicker type="datetimerange" v-model="filterForm.createDate" format="yyyy-MM-dd" placeholder="From: YYYY-MM-DD   To: YYYY-MM-DD" style="width: 300px"></DatePicker>
          </FormItem>
        </div>
        <div class="input-group">
          <FormItem label="Shipment#" prop="shipment" class="item">
            <Input v-model="filterForm.shipment" placeholder="Enter something..."></Input>
          </FormItem>
          <FormItem label="Tracking No." prop="tracking" class="item">
            <Input v-model="filterForm.tracking" placeholder="Enter something..."></Input>
          </FormItem>
        </div>

        <FormItem>
          <Button type="primary" size="large" @click="formSubmit('filterForm')">Go</Button>
          <Button size="large" style="margin-left: 8px" @click="formReset('filterForm')" >Reset</Button>
        </FormItem>
      </Form>
    </section>
    <section class="pagination-wrapper clearfix">
      <div class="cnt-left">
        <Page :total="totalItems" :current="curPage" :page-size="pageSize" :page-size-opts="pageSizeOpts" show-sizer @on-change="changePage" @on-page-size-change="changePageSize"></Page>
      </div>
      <div class="cnt-right">
        <p class="items-remain" v-show="shippedDada">Results <span>{{totalItems}}</span></p>
      </div>

      <section class="table-size">
        <div class="table-size-cnt">
          Table size
          <Radio-group v-model="tableSize" type="button">
            <Radio label="large">large</Radio>
            <Radio label="default">medium(default)</Radio>
            <Radio label="small">small</Radio>
          </Radio-group>
        </div>
      </section>
    </section>
    <section class="data-list">
      <Table border no-data-text :size="tableSize" :loading="tableDataloading" ref="waitToConfirm" :columns="tableColumns" :data="shippedDada" v-if="shippedDada.length"></Table>
      <div v-show="notableDataTip">
        <Alert type="warning" class="no-data-alter">
          A warning prompt
          <template slot="desc">
            No data for confirmed!!
          </template>
        </Alert>
      </div>
    </section>
    <section class="pagination-wrapper clearfix">
      <div class="cnt-left">
        <Page :total="totalItems" :current="curPage" :page-size="pageSize" :page-size-opts="pageSizeOpts" show-sizer @on-change="changePage" @on-page-size-change="changePageSize"></Page>
      </div>
      <div class="cnt-right">
        <p class="items-remain" v-show="shippedDada">Results <span>{{totalItems}}</span></p>
      </div>
    </section>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  import { modalInstance } from '@/components/mixin';
  import { getSupplierPO, searchShippedItems } from '@/api/index';
  export default {
    name: 'Shipped',
    mixins: [ modalInstance ],
    data () {
      return {
        tableDataloading: true,
        notableDataTip: false,
        tableSize: 'default',
        shippedDada: [],
        filterForm: {
          status: [],
          shipment: '',
          tracking: '',
          createDate: ''
        },
        totalItems: 0,
        curPage: 1,
        pageSize: 10,
        pageSizeOpts: [10, 20, 30, 40, 50],
        tableColumns: [
          {
            title: 'Shipment #',
            align: 'center',
            minWidth: 150,
            fixed: 'left',
            key: 'shipment'
          },
          {
            title: 'Fulfillment',
            align: 'center',
            width: 100,
            key: 'fulfillment'
          },
          {
            title: 'Create Date',
            align: 'center',
            minWidth: 130,
            key: 'create_date'
          },
          {
            title: 'Tran. Qty',
            align: 'center',
            width: 70,
            key: 'tran_qty'
          },
          {
            title: 'Rev. Qty',
            align: 'center',
            width: 70,
            key: 'rev_qty'
          },
          {
            title: 'Dispatch Date',
            minWidth: 100,
            align: 'center',
            key: 'dispatch_date'
          },
          {
            title: 'ETA',
            minWidth: 95,
            align: 'center',
            key: 'ETA'
          },
          {
            title: 'Received Date',
            minWidth: 100,
            align: 'center',
            key: 'received_date'
          },
          {
            title: 'Tracking No',
            width: 110,
            align: 'center',
            key: 'tracking_no'
          },
          {
            title: 'Status',
            minWidth: 145,
            align: 'left',
            key: 'status'
          },
          {
            title: 'Action',
            key: 'action',
            width: 160,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'default'
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.editShipment(params.index)
                    }
                  }
                }, 'Edit'),
                h('Button', {
                  props: {
                    type: 'default'
                  },
                  on: {
                    click: () => {
                      this.viewShipment(params.index)
                    }
                  }
                }, 'View')
              ]);
            }
          }
        ]
      }
    },
    created () {
      this.initTableData();
    },
    mounted(){
    },
    methods: {
      initTableData: function () {
        getSupplierPO('shipped').then(res => {
          this.$Loading.start();
          let resObj = res.data;
          if (!!resObj) {
            this.$Loading.finish();
            this.tableDataloading = false;
            this.shippedDada =  resObj.data;
            this.totalItems = this.shippedDada.length;

            // mock Pagination effect starts
            let dataShowList = [];
            this.shippedDada.forEach((item, index) => {
              if (index >= (this.pageSize -1)) {
                return
              }
              dataShowList.push(item);
            });
            this.shippedDada = dataShowList;
            // mock Pagination effect ended

          } else {
            this.$Loading.error();
            this.notableDataTip = true;
          }
        });
      },
      formSubmit: function (name) {
        if (this.filterForm.status.length == 0 && !this.filterForm.shipment && !this.filterForm.tracking) {
          this.$Message.error('Please enter search condition!');
        } else {
          searchShippedItems(this.filterForm.shipment).then(res => {
            this.$Loading.start();
            let resData = res.data;
            if(resData.status_code == 1) {
              this.shippedDada = resData.data;
              this.$Message.success('Submit success!');
              this.$Loading.finish();
            } else {
              this.$Message.error('Submit fail!');
              this.$Loading.error();
            }
          });
        }
      },
      formReset: function (name) {
        this.filterForm.createDate = '';
        this.$refs[name].resetFields();
        this.initTableData();
      },
      editShipment (index) {
        this.$router.push({ path:'/supplier-PO/shipped/edit-shipment', query: { shipment:  encodeURI(this.shippedDada[index].shipment)} })
      },
      viewShipment (index) {
      	this.$router.push({ path:'/supplier-PO/shipped/shipment-detail', query: { shipment:  encodeURI(this.shippedDada[index].shipment)} })
      },
      changePage (page) {
        this.curPage = page;

        // mock Pagination effect starts
        let dataShowList = [], startShowIndex = (this.curPage - 1) * this.pageSize;
        getSupplierPO('shipped').then(res => {
          let resData = res.data;
          this.shippedDada = resData.data;
          if (this.curPage == 1) {
            this.shippedDada.forEach((item, index) => {
              if (index >= (this.pageSize -1)) {
                return
              }
              dataShowList.push(item);
            });
          } else {
            this.shippedDada.forEach((item, index) => {
              if (index < startShowIndex) {
                return
              }
              dataShowList.push(item);
            });
          }
          this.shippedDada = dataShowList;
        });
        // mock Pagination effect ended
      },
      changePageSize (pageSize) {
        this.pageSize = pageSize;

        // mock Pagination effect starts
        let dataShowList = [], startShowIndex = (this.curPage - 1) * this.pageSize;
        getSupplierPO('shipped').then(res => {
          let resData = res.data;
          this.shippedDada = resData.data;
          if (this.curPage == 1) {
            this.shippedDada.forEach((item, index) => {
              if (index >= (this.pageSize -1)) {
                return
              }
              dataShowList.push(item);
            });
          } else {
            this.shippedDada.forEach((item, index) => {
              if (index < startShowIndex) {
                return
              }
              dataShowList.push(item);
            });
          }
          this.shippedDada = dataShowList;
        });
        // mock Pagination effect ended
      }
    },
    watch: {
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../../assets/sass/mixin';
  .input-group {
    @include fj(flex-start);
    .item {
      width: 28%;
      margin-right: 5%;
      margin-bottom: 15px;
    }
    .item-status {
      width: 100%;
      margin-bottom: 15px;
    }
  }
  .shipped-tab-btn-group {
    @include fj(flex-start);
    margin-top: 20px;
    .item {
      margin-right: 10px;
    }
  }
  .table-size-cnt {
    padding-left: 50px;
  }
  .data-operates-top {
    padding-bottom: 0;
  }
</style>
